<template>
    <img v-bind:src="pic" alt="">
    <a :href="url">百度</a>
    <h2 @click="handle" :class="[active ? 'red':'green']">1111</h2>
    <input type="text" @input="onChange(e)":value="val">
    <h4>{{ val }}</h4>
</template>

<script setup>
    import {ref} from 'vue'
    const pic = 'https://img2.baidu.com/it/u=1531076843,2123969899&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
    const url = 'https://www.baidu.com/'

    let name = ref('')
    let active = ref(false)
    const handle = () =>{
        // name.value = 'red'
        active.value = !active.value
    }
    let val = ref('')
    const onChange = (e) =>{
        // console.log('1');
        console.log('onChange',e.target.value);
        val.value = e.target.value
    }

</script>

<style lang="css" scoped>
    img{
        width: 200px;
    }
    .red{
        color: red;
    }
    .green{
        color: green;
    }


</style>